<template>
  <div>
    <el-row class="top_box">
      <el-row class="top_slide">
        <el-col :span="24">
          <el-carousel class="slide_box">
            <el-carousel-item v-for="(item, index) in imgArr" :key="index">
              <img height="300px" class="slide_item" :src="item" alt="">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
      <el-row class="top_search">
        <el-col :span="5" class="txt_center search_place">{{place}}</el-col>
        <el-col :span="14" class="search">
          <div class="input_box">
            <i class="el-icon-search"></i>
            <el-input v-model="input" placeholder="天伦里餐厅" class="input_model">
            </el-input>
          </div>
        </el-col>
        <el-col :span="5" class="txt_center person_box"  >
          <img src="../../../static/img/person.png" alt="" class="person_center">
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imgArr: ['../../static/img/food1.jpg', '../../static/img/food2.jpg', '../../static/img/food3.jpg'],
      imgGGArr: ['../../static/img/gg1.jpg', '../../static/img/gg2.jpg', '../../static/img/gg3.jpg'],
      place: '遂昌县',
      input: ''
    }
  }
}
</script>
<style scoped lang="scss">
  .top_box{
    position: relative;
    @at-root .slide_box{
      height: 300px;
      @at-root  .slide_item{
        width: 100vw;
        height: 300px;
      }
    }
    @at-root .top_search{
      width: 100vw;
      height: 55px;
      font-size: 22px;
      position: absolute;
      top: 57px;
      z-index: 10;
      @at-root .search{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 25%;
      }
      @at-root .search_place{
        color: white;
        line-height: 55px;
        position: absolute;
      }
      @at-root .input_box{
        background-color: #ffffff;
        border-radius: 27px;
        padding-left: 5%;
        vertical-align: middle;
      }
      @at-root .input_model{
        display: inline-block;
        width: 80%;
        height: 100%;
        border: none;
      }
      @at-root .person_center{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 45px;
        text-align: center;
        display: inline-block;
        right: 5%;
      }
    }
  }
</style>
